<template>
  <div>
    <el-dialog v-model="dialogVisible" width="580px">
      <template #title>
        <span class="search-input">表头字段显示</span>
      </template>
      <div class="container">
        <div class="left">
          <el-card shadow="never" class="content">
            <el-input placeholder="请输入内容" class="search" />
            <div>
              <el-checkbox v-for="p in noShowList" :key="p" :label="p" @change="checkChange(p)">{{ p }}</el-checkbox>
            </div>
          </el-card>
        </div>
        <div class="right">
          <el-card shadow="never" class="content">
            <el-input placeholder="请输入内容" class="search" />
            <draggable :list="showList">
              <div v-for="(element, index) in showList" :key="index" class="item">
                <div>
                  <svg-icon icon-class="drag" class="iconStyle" />
                  {{ element }}
                </div>
                <div>
                  <svg-icon icon-class="top" class="iconStyle" @click="handleTop(index)" />
                  <svg-icon icon-class="close" class="iconStyle" @click="handleDelete(element)" />
                </div>
              </div>
            </draggable>
          </el-card>
        </div>
      </div>
      <template #footer>
        <div class="dialog__footer">
          <span>
            <el-button @click="dialogVisible = false">恢复默认</el-button>
          </span>
          <span>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { VueDraggableNext as draggable } from 'vue-draggable-next'
import { reactive, toRefs, onMounted } from 'vue'
import { getHeaderById } from '@/api/table'
import _ from 'lodash'
const props = defineProps({
  tableId: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['updateTHeaders'])
const state = reactive({
  noShowList: [] as Array<string>,
  list: [],
  showList: [] as Array<string>
})
let dialogVisible = ref(false)
onMounted(async () => {
  var res = await getHeaderById({})
  state.noShowList = res.data.noShowList
  state.showList = res.data.showList
  state.list = res.data.list
})

const checkChange = (v: string) => {
  state.noShowList = state.noShowList.filter((item) => item !== v)
  state.showList.push(v)
}
const handleDelete = (v: string) => {
  state.showList = state.showList.filter((item) => item !== v)
  state.noShowList.push(v)
}
const handleTop = (index: number) => {
  state.showList.unshift(state.showList.splice(index, 1)[0])
}
const handleSubmit = () => {
  dialogVisible.value = false
  emit('updateTHeaders', _.cloneDeep(state.showList))
}
const { noShowList, showList } = toRefs(state)
defineExpose({dialogVisible})
</script>

<style lang="scss" scoped>
.addButton {
  margin-left: 10px;
}
.search-input {
  ::v-deep(.el-input__inner) {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: 3px solid #326be6;
    border-radius: 0px;
  }
}
.container {
  display: flex;
  ::v-deep(.el-card__body) {
    padding: 16px;
  }
  .search {
    margin-bottom: 16px;
    ::v-deep(.el-input__inner) {
      width: 228px;
    }
  }
  .content {
    width: 260px;
    height: 320px;
  }
  .left {
    margin-right: 20px;
    ::v-deep(.el-checkbox) {
      width: 100%;
      height: 44px;
      line-height: 44px;
    }
  }
  .right {
    .item {
      width: 228px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      padding: 10px 5px;
      border-radius: 4px;

      &:hover {
        cursor: move;
        box-shadow: 0px 3px 6px rgba(7, 8, 12, 0.1);
      }
      .iconStyle {
        cursor: pointer;
        font-size: 20px;
        width: 20px;
        height: 20px;
        margin: 0 5px;
      }
    }
  }
}
.dialog__footer {
  display: flex;
  justify-content: space-between;
}
</style>
